<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item ref="city"  title="区域">
        <DrouDown @closeFn="closeFn"  :arr="cityArea" :load="loading"></DrouDown>
      </van-dropdown-item>
      <van-dropdown-item ref="type" title="方式">
        <DrouDown @closeFn="closeFn" :arr="rentType" :load="loading"></DrouDown>
      </van-dropdown-item>
      <van-dropdown-item ref="price" title="价格">
        <DrouDown @closeFn="closeFn"  :arr="price" :load="loading"></DrouDown>
      </van-dropdown-item>
      <van-dropdown-item ref="item" title="筛选" @open="isEdit = true">
        <van-popup position="right" v-model="isEdit" get-container="body">
          <div id="main">
            <SideBar :arr="roomType" >户型</SideBar>
            <SideBar :arr="oriented">朝向</SideBar>
            <SideBar :arr="floor">楼层</SideBar>
            <SideBar :arr="characteristic">房屋亮点</SideBar>
          </div>
          <div class="choice">
            <button id="esc" @click="clearFn">清除</button>
            <button id="sure" @click="subFn">确定</button>
          </div>
        </van-popup>
      </van-dropdown-item>
    </van-dropdown-menu>
  </div>
</template>

<script>
import SideBar from './Child/SideBar.vue'
import { cityRulesApi, getHousesApi } from '@/api'
import DrouDown from '@/views/Second/House/Child/DropDown.vue'
export default {
  async created () {
    // console.log(this.city.value)
    const res = await cityRulesApi(this.city.value)
    const changeFn = (obj) => {
      for (const key in obj) {
        if (!obj.children) {
          obj.children = [{ label: '' }]
        }
        if (obj[key] instanceof Array) {
          for (let i = 0; i < obj[key].length; i++) {
            changeFn(obj[key][i])
          }
        }
      }
    }

    changeFn(res.data.body.area)
    changeFn(res.data.body.subway)
    this.cityArea.push(res.data.body.area)
    this.cityArea.push(res.data.body.subway)
    this.rentType = res.data.body.rentType
    this.price = res.data.body.price
    this.roomType = res.data.body.roomType // 户型
    this.oriented = res.data.body.oriented // 朝向
    this.floor = res.data.body.floor // 楼层
    this.characteristic = res.data.body.characteristic // 房屋亮点
    this.loading = false

    // console.log('x', res.data.body)
  },
  data () {
    return {
      isEdit: false,
      loading: true,
      showPicker: false,
      rentType: [],
      price: [],
      show: true,
      cityArea: [],
      roomType: [],
      oriented: [],
      floor: [],
      characteristic: [],
      more: [],
      city: {
        name: localStorage.getItem('cityName') || '',
        value: localStorage.getItem('cityValue') || ''
      }
    }
  },
  components: {
    DrouDown,
    SideBar
  },
  methods: {
    clearFn () {
      // this.isEdit = false
      document.querySelectorAll('#main .active').forEach(item => item.classList.remove('active'))
      this.more = []
    },
    async subFn () {
      document.querySelectorAll('#main .active').forEach(item => { this.more.push(item.dataset.id) })
      const res = await getHousesApi({
        cityid: localStorage.getItem('cityValue'),
        more: [...new Set(this.more)].join('')

      })
      this.$store.commit('setHouseList', res)
      this.isEdit = false
      this.$refs.item.toggle(false)
    },
    closeFn () {
      this.$refs.city.toggle(false)
      this.$refs.type.toggle(false)
      this.$refs.price.toggle(false)
    }
  }
}
</script>

<style lang="less" scoped>
#main {
  width: 295px;
  height: 100%;
  padding: 10px;
  background-color: #fff;
  box-sizing: border-box;
}
.choice {
  position: sticky;
  bottom: 0;
  left: 0;
  display: flex;
  #sure {
    width: 230px;
    height: 50px;
    line-height: 50px;
    background-color: #1cb676;
    font-size: 18px;
    color: #fff;
    text-align: center;
    border: none;
  }
  #esc {
    width: 120px;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color: #21b97a;
    text-align: center;
    border: none;
  }
}
</style>
